<template>
	<view style="padding-bottom: 0rpx;background: white;height: auto;min-height: 100vh;">
		<view
			style="display: flex;align-items: center;position: fixed;left: 0;top: 0;z-index: 9999;background: white;width: 100%;">
			<view id="home" style="margin-top: 24rpx;margin-left: 30rpx;float: left;margin-bottom: 18rpx;"
				class="home acea-row row-center-wrapper iconfont icon-xiangzuo h5_back" @tap="returns">
			</view>

		</view>

		<!-- 		<swiper class="swiper-box" v-if="topImg.length > 0" :vertical="vertical"
			style="margin-top: 70rpx;height: 1000vh;">
			<swiper-item v-for="(item, index) in topImg" :key="index" style="height: auto;">
				<image :src="item.img_url" style="width: 100%;" mode="widthFix" @click="lookTopBigImage(0)">
			</swiper-item>
		</swiper> -->
		<view class="swiper-box" v-if="topImg.length > 0" style="margin-top: 70rpx;height: auto;">
			<view v-for="(item, index) in topImg" :key="index" style="height: auto;">
				<image :src="item.img_url" style="width: 100%;" mode="widthFix" @click="lookTopBigImage(0)">
			</view>
		</view>
		<view style="margin: 20rpx;width: calc(100% - 40rpx);">
			<view class="">
				<text style="font-size: 32rpx;">评论留言</text>
			</view>
			<view>
				<!-- 评论列表 -->
				<view style="width: 100%;height: auto;">
					<commentListVue :dataList="dataList" :showReply="showReply" :workId="workId" :userId="userId"
						@hideFun="hideFun" :token="token" @refreshSingleReply="refreshSingleReply" ref="commentList">
					</commentListVue>
				</view>
			</view>
		</view>

		<view style="width: 100%;height: 120rpx;position: fixed;background-color: white;left: 0;bottom: 0;"
			v-show="showbottom == true">
			<view style="display: flex;width: 100%;">
				<view @click="showInput()"
					style="background-color: #F5F5F5;height: 80rpx;margin: 10rpx 20rpx 20rpx 20rpx;width: calc(60% - 20rpx);border-radius: 40rpx;line-height: 80rpx;padding-left: 20rpx;">
					<text style="color: #BABABA;">说点什么吧</text>
				</view>
				<view style="display: grid;height: 60rpx;text-align: center;margin-top: 10rpx;width: 11%;"
					@click="likeWorks()">
					<view>
						<image :src=" islike == 0 ? zanno : zanyes " style="width: 46rpx;height: 46rpx;">
						</image>
					</view>
					<view style="font-size: 20rpx;padding-top: -4rpx;color: #101010;">{{likecount}}</view>
				</view>
				<view style="display: grid;height: 60rpx;text-align: center;margin-top: 10rpx;width: 11%;"
					@click="collectionWorks()">
					<view>
						<image :src=" iscollect == 0 ? collno : collyes " style="width: 46rpx;height: 46rpx;">
						</image>
					</view>
					<view style="font-size: 20rpx;padding-top: -4rpx;color: #101010;">{{collectcount}}</view>
				</view>
				<view style="display: grid;height: 60rpx;text-align: center;margin-top: 10rpx;width: 11%;">
					<view>
						<image :src=" comUrl " style="width: 46rpx;height: 46rpx;">
						</image>
					</view>
					<view style="font-size: 20rpx;padding-top: -4rpx;color: #101010;">{{commentCount}}</view>
				</view>
			</view>
		</view>
		<view class="des_detail" v-if="isBlackApp() && workId != -1">
			<open-app :shareUrl="shareUrl"></open-app>
		</view>
	</view>
</template>
<script>
	import openApp from './components/openApp.vue';
	import {
		getDynamicCommentByType,
		addDynamicLike,
		removeDynamicLike,
		addDynamicCollect,
		removeDynamicCollect
	} from '@/api/home.js';
	import {
		openFwjz
	} from '@/api/case.js';
	import animationType from '@/utils/animationType.js'
	import commentListVue from './components/comment-list.vue';
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		components: {
			commentListVue,
			openApp
		},
		data() {
			return {
				vertical: true,
				shareUrl: 'https://www.mayimae.com/qz/pages/usercase/witnessdetail?userId=-1&token=-1&workId=',
				screenWidth: uni.getSystemInfoSync().screenWidth,
				picInfo: {},
				workId: -1,
				topImg: [],
				siluContent: '',
				preface: '',
				changjings: [],
				moreimages: [],
				likecount: 0,
				islike: 0,
				collectcount: 0,
				iscollect: 0,
				dataList: [],
				allCommentData: [],
				showReply: '0',
				zanyes: 'https://pic.mae.vip//crmebimage/public/maintain/2024/12/12/2226abbda4864e9089057344e5f1d63f4uyydqxgsn.png',
				zanno: 'https://pic.mae.vip//crmebimage/public/maintain/2024/12/12/fca22fd66a9a4c8e918de351d1d16810gr1f84fqrf.png',
				collyes: 'https://pic.mae.vip//crmebimage/public/maintain/2024/12/12/f7d283cfc201470abc2ef976c75e4c08bxgrs2atud.png',
				collno: 'https://pic.mae.vip//crmebimage/public/maintain/2024/12/12/32cfd2835d6242c29f138e3235574a9ae8gvdgi3zd.png',
				comUrl: 'https://pic.mae.vip//crmebimage/public/maintain/2024/12/12/045558b9f8f94b5689ed7bbf7b35779fvq61mknjlz.png',
				commentCount: '',
				userId: '',
				token: '',
				showbottom: true,
				platform: uni.getSystemInfoSync().platform, //手机类型
			}
		},
		computed: mapGetters(['isLogin', 'uid', 'userInfo', 'md5AppToken']),
		onLoad(options) {
			let that = this;
			that.workId = options.workId;
			that.shareUrl = that.shareUrl + that.workId; //、、、、、、、、、、
			that.token = options.token;
			that.userId = options.userId;
			that.getPictureInfo();
			that.getComment();

			console.log('---  + ' + that.shareUrl)
			// 通过检查window.android和window.webkit属性来判断是否是移动端
			if (window.webkit) {
				if (that.platform == 'ios') {
					window.webkit.messageHandlers.goShare.postMessage({
						'page': '34',
						'shareurl': that.shareUrl
					});
				}
			}
			if (that.platform == 'android') {
				if (!that.isBlackApp()) {
					window.location.href = 'goShare&page=' + '34' + '&shareurl=' + that.shareUrl;
				}
			}
		},
		mounted() {
			let that = this;
		},
		onShow() {

		},
		created() {
			uni.$on('refreshCommentList', this.refreshList);
		},
		watch: {

		},
		methods: {
			isBlackApp() {
				var u = navigator.userAgent.toLowerCase();
				return /micromessenger/i.test(u) || u.indexOf("weibo") > -1 || u.indexOf("qq") > -1 || u.indexOf(
					'mqqbrowser') > -1;
			},
			refreshSingleReply(e) {
				let that = this;
				that.getComment();
			},
			returns() {
				console.log('----!!!  ')
				uni.navigateBack();
			},
			hideFun(e) {
				console.log(e)
				let that = this;
				that.showbottom = e;
			},
			showInput() {
				let that = this;
				that.$refs.commentList.changeFocus();
			},
			refreshList() {
				this.getComment();
			},
			likeWorks() {
				let that = this;
				if (that.islike == 0) {
					addDynamicLike({
						id: that.workId,
						type: '用户案例',
						userId: that.userId,
						token: that.token,
					}).then(res => {
						that.islike = 1;
						that.likecount = that.likecount + 1;
					})
				} else {
					removeDynamicLike({
						id: that.workId,
						type: '用户案例',
						userId: that.userId,
						token: that.token,
					}).then(res => {
						that.islike = 0;
						that.likecount = that.likecount - 1;
					})
				}
			},
			collectionWorks() {
				let that = this;
				if (that.iscollect == 0) {
					//收藏
					addDynamicCollect({
						id: that.workId,
						type: '用户案例',
						userId: that.userId,
						token: that.token,
					}).then(res => {
						that.iscollect = 1;
						that.collectcount = that.collectcount + 1;
					})
				} else {
					//取消收藏
					removeDynamicCollect({
						id: that.workId,
						type: '用户案例',
						userId: that.userId,
						token: that.token,
					}).then(res => {
						that.iscollect = 0;
						that.collectcount = that.collectcount - 1;
					})
				}
			},
			lookTopBigImage(index) {
				let arr = [];
				for (var i = 0; i < this.topImg.length; i++) {
					arr.push(this.topImg[i].img_url)
				}
				uni.previewImage({
					urls: arr,
					current: index
				});
			},
			getComment() {
				let that = this;
				getDynamicCommentByType({
					page: 1,
					dynId: that.workId,
					type: '用户案例',
					userId: that.userId,
					token: that.token,
				}).then(res => {
					let arr = res.data.mess;
					that.dataList = [];
					that.dataList = res.data.mess;
					that.dataList.forEach(item => {
						that.$set(item, 'showMore', '0');
					});
					//console.log(JSON.stringify(that.dataList))
				})
			},
			getPictureInfo() {
				let that = this;
				openFwjz({
					id: that.workId,
					userId: that.userId,
					token: that.token,
				}).then(res => {
					that.picInfo = res.data;
					that.topImg = that.picInfo.images;

					that.collectcount = that.picInfo.collect_num;
					that.iscollect = that.picInfo.is_collect;
					that.likecount = that.picInfo.like_num;
					that.islike = that.picInfo.is_like;
					that.commentCount = that.picInfo.comment_num;
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #fff;
	}


	.des_detail {
		/* 必须设置position: relative;不然会位置飘出父层 */
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1001;
		width: 100%;
		height: 100vh;
		//background: rgb(95, 157, 228);
		background: transparent;
	}

	.hotcity-scroll-view {
		white-space: nowrap;
		width: 100%;
		margin-top: 10rpx;

		.item {
			//width: 220rpx;
			height: 200rpx;
			display: inline-table;
			margin-right: 20rpx;
			align-items: center;
			justify-content: center;
		}

		img {
			border-radius: 8rpx;
		}
	}
</style>